<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#myCan {
				display: block;
				margin: 0 auto;
				background-color: lightskyblue;
			}
		</style>
	</head>
	<body>
		<canvas id="myCan" width="800" height="400"></canvas>
		<script>
		        var oC = document.getElementById('myCan');
		        var ctx = oC.getContext('2d');
		        var tmp1 = [0,2,5,-5,5,6,3];
		        // 画圈
		        ctx.strokeStyle='blue';
				ctx.font = 'italic 12px 微软雅黑';
				ctx.textAlign = 'center';
		        for(var i = 0;i<7;i++){
		            ctx.beginPath();
		            ctx.arc(50*(i+1),100-5*(tmp1[i]-tmp1[0]),5,0,2*Math.PI);
		            ctx.moveTo(50*(i+1)+5,100-5*(tmp1[i]-tmp1[0]))
		            ctx.lineTo(50*(i+1+1)-5,100-5*(tmp1[i+1]-tmp1[0]));
					ctx.fillText(tmp1[i]+'°',50*(i+1),85-5*(tmp1[i]-tmp1[0]));
		            ctx.stroke()
		        }
		        var tmp2 = [-9,-7,-7,-7,-6,-5,-8];
		    </script>

	</body>
</html>
